<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">
    <!-- 传递数据的时候，如果没有 v-bind 进行绑定，一律为字符型 -->
    <!-- 特别是 number 以及 boolean 两个类型传值经常会出现错误 -->
    <hello-world></hello-world>
  </div>

  <script src="./scripts/vue.js"></script>
  <script>

    // 声明子组件
    Vue.component('hello-world', {
      // props: ['num'],
      // vue 给 props 提供了一种校验的写法，如果不满足特定的类型，就会报错
      props: {
        // num: Number
        num: {
          // type 是规定接收的数据的类型
          type: Number,
          // default 是定义默认值
          default: 3
        }
      },
      data: function () {
        return {
          name: 'Tom'
        }
      },
      template: `
        <div>
          <p>{{name}}</p>
          <p>{{num}}</p>
        </div>
      `
    })

    var vm = new Vue({
      el: '.box',
      data: {
        age: 3,
        num: 10,
        arr: [1, 2, 3],
        obj: {
          name: '斯派克',
          age: 18
        }
      }
    })
  </script>
</body>

</html>